<template>
  <div>
    <span class="fixed mt-3 text-base right-16">{{ sysAdmin.username }}</span>
    <el-dropdown>
      <img
        v-if="!sysAdmin.profile_photo"
        src="../../assets/images/logo.jpg"
        class="w-10 h-10 border-0 cursor-pointer rounded-xl"
      />
      <img
        v-else
        :src="sysAdmin.profile_photo"
        class="w-10 h-10 border-0 cursor-pointer rounded-xl"
      />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="showProfile()">个人信息</el-dropdown-item>
          <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { LoginStore } from '@/store/login'
import router from '@/router'
const loginStore = LoginStore()

const loginOut = () => {
  ElMessageBox.confirm('确定退出登录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      loginStore.cleanLoginInfo()
      ElMessage.success('退出成功')
      router.replace({ path: '/login' })
    })
    .catch(() => {
      ElMessage.info('取消退出')
    })
}

const showProfile = () => {
  router.replace({ path: '/personal' })
}

let sysAdmin = loginStore.sysAdmin
</script>

<style scoped></style>
